<template>
  <div>
    <div class="ele-left">
      <el-radio-group v-model="param.type" @change="paramTypeChange">
        <el-radio :label="1">变量</el-radio>
        <el-radio :label="2">M变量</el-radio>
        <el-radio :label="3">常量</el-radio>
      </el-radio-group>
    </div>

    <div v-show="param.type==1 || param.type==2" class="ele-left">
      <el-select v-model="param.value" placeholder="请选择变量" :clearable=true filterable>
        <el-option v-for="t in variateList" :label="t.varName+'_'+t.dataType" :value="t.varName" :key="t.varName"/>
      </el-select>
    </div>

    <div v-show="param.type===3" class="ele-left">
      <el-input v-model="param.value" placeholder="请输入值"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'paramItem',
  props: {
    param: {
      type: Object
    }
  },
  data() {
    this.param = {type: {}, value: {}}
    return {
      variateList: []
    }
  },
  created() {
    this.listVariate()
  },
  methods: {
    paramTypeChange() {
      this.$props.param.value = null;
    },
    listVariate() {
      let _this = this
      let param = {
        productCode: "mayi",
        eventType: "yx"
      }
      this.$api.projectVariateList(param).then(res => {
        if (res.code === '00000') {
          _this.variateList = res.data
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    }
  }
}
</script>
<style>
.ele-left {
  width: 300px;
  text-align: left
}
</style>

